<template>
  <div style="margin-top: 60px;margin-left: 80px;border: 0px solid red">
  <el-form style="margin-left: -40px" :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm"
           class="demo-form-inline">
    <el-form-item label="字段" prop="key">
      <el-select v-model="ruleForm.key" style="width: 160px;float: left" placeholder="请选择">
        <el-option label="学号" value="stu_id"></el-option>
        <el-option label="姓名" value="stu_name"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="值">
      <el-input v-model="ruleForm.value" placeholder="请输入关键字"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%;position: relative;top: 10px">
    <el-table-column
        fixed
        label="宿舍ID"
        width="140"
        prop="dorId">
    </el-table-column>
    <el-table-column
        label="宿舍"
        width="140"
        prop="dorName">
    </el-table-column>
    <el-table-column
        label="学号"
        width="140"
        prop="stuId">
    </el-table-column>
    <el-table-column
        label="姓名"
        width="140"
        prop="stuName">
    </el-table-column>
    <el-table-column
        label="性别"
        width="140"
        prop="stuSex">
    </el-table-column>
    <el-table-column
        label="状态"
        width="140"
        prop="stuState">
    </el-table-column>
    <el-table-column
        label="入住时间"
        width="160"
        prop="stuDate">
    </el-table-column>
    <el-table-column
        label="操作"
        align="right"
    >
      <template slot-scope="scope">
        <el-button
            size="mini"
            type="danger"
            @click="moveout(scope.$index, scope.row)">迁出
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      style="margin-top: 30px;float: right"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="parseInt(total)"
      :current-page.sync="currentPage"
      @current-change="page"
  >
  </el-pagination>
  </div>
</template>

<script>
export default {
  name: "MoveoutRegister",
  data(){
    return{
      currentPage: 1,
      pageSize: 5,
      total: '',
      key: '',
      value: '',
      ruleForm: {
        key: '',
        value: '',
        page: '',
        size: 5
      },
      rules: {
        key: [
          {required: true, message: '请选择字段', trigger: 'change'}
        ]
      },
      list:{
        dorId:'',
        dorName:'',
        stuId:'',
        stuName:'',
        stuSex:'',
        stuState:'',
        stuDate:''
      },
      tableData: null,
      search: ''
    }
  },
  methods: {
    page(currentPage){
      const _this=this
      if (_this.ruleForm.value==''){
        axios.get('http://192.168.163.234:8081/moveout/list/'+currentPage+'/'+_this.pageSize).then(
            function (response){
              _this.tableData=response.data.data.data
              _this.total=response.data.data.total
            }
        )
      }else{
        _this.ruleForm.page=_this.currentPage
        axios.get('http://192.168.163.234:8081/moveout/search',{params:_this.ruleForm}).then(
            function (response) {
              _this.tableData=response.data.data.data
              _this.total=response.data.data.total
            }
        )
      }
    },
    moveout(index, row) {
      const _this=this;
      this.$prompt('请输入迁出原因','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        inputPattern:/^[\s\S]*.*[^\s][\s\S]*$/,
        inputErrorMessage:'迁出原因不能为空'
      }).then(({ value })=> {
        this.$confirm('确认迁出【' + row.stuName + '】吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.get('http://192.168.163.234:8081/moveout/moveout/' + row.stuId + '/' + value).then(
              function (response) {
                if (response.data.code == 0) {
                  _this.$alert('【' + row.stuName + '】已删除', '', {
                    confirmButtonText: '确定',
                    callback: action => {
                      location.reload();
                    }
                  });
                }
                ;
              }
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      })
    },
    onSubmit(formName) {

      //让翻页复原
      this.currentPage=1;
      this.$refs.ruleForm.validate((valid)=>{
        if (valid){
          const _this=this
          _this.ruleForm.page=_this.currentPage
          axios.get('http://192.168.163.234:8081/moveout/search',{params:_this.ruleForm}).then(
              function (response) {
                _this.tableData=response.data.data.data
                _this.total=response.data.data.total
              }
          )
        }
      })
    }
  },
  created() {
    const _this=this
    axios.get('http://192.168.163.234:8081/moveout/list/1/'+_this.pageSize).then(
        function (response) {
          console.log(response.data.data.data)
          _this.tableData=response.data.data.data
          _this.total=response.data.data.total
        }
    )
  }
}
</script>

<style scoped>

</style>
